<!-- deepseek前端数据 -->
<template>
  <div class="chat-container">
    <div class="chat-box">
      <div class="messages" ref="messageContainer">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="['message', message.role]"
        >
          <div class="message-content">
            {{ message.content }}
          </div>
        </div>
      </div>
      <div class="input-area">
        <textarea
          v-model="userInput"
          @keyup.enter.exact="sendMessage"
          placeholder="输入消息，按Enter发送..."
          rows="1"
        ></textarea>
        <button @click="sendMessage" :disabled="isLoading">
          {{ isLoading ? "发送中..." : "发送" }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
// 删除这行
// const fetch = require('node-fetch');
const messages = ref([]);
const userInput = ref("");
const isLoading = ref(false);
const messageContainer = ref(null);

// 发送消息
const sendMessage = async () => {
  if (!userInput.value.trim() || isLoading.value) return;

  // 添加用户消息
  messages.value.push({
    role: "user",
    content: userInput.value.trim(),
  });

  const userMessage = userInput.value.trim();
  userInput.value = "";
  isLoading.value = true;

  try {
    const response = await fetch("http://127.0.0.1:8000/app/deepseek/chat/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        message: userMessage,
      }),
    });

    const data = await response.json();

    if (data.status === "success") {
      messages.value.push({
        role: "assistant",
        content: data.response,
      });
    } else {
      messages.value.push({
        role: "assistant",
        content: "抱歉，出现了一些错误。",
      });
    }
  } catch (error) {
    console.error("Error:", error);
    messages.value.push({
      role: "assistant",
      content: "抱歉，服务器连接失败。",
    });
  } finally {
    isLoading.value = false;
    await nextTick();
    scrollToBottom();
  }
};

// 滚动到底部
const scrollToBottom = () => {
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
  }
};

// 组件挂载时添加欢迎消息
onMounted(() => {
  messages.value.push({
    role: "assistant",
    content: "你好！我是AI助手，很高兴为你服务。",
  });
});
</script>

<style scoped>
.chat-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  height: 100vh;
  background: #f7f9fc;
}

.chat-box {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 32px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
}

.message {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s ease;
  max-width: 85%;
}

.message.user {
  align-items: flex-end;
  margin-left: auto;
}

.message.assistant {
  align-items: flex-start;
  margin-right: auto;
}

.message-content {
  padding: 16px 20px;
  border-radius: 20px;
  word-wrap: break-word;
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: 0.3px;
}

.user .message-content {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  border-radius: 20px 20px 4px 20px;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}

.assistant .message-content {
  background: #ffffff;
  color: #1f2937;
  border-radius: 20px 20px 20px 4px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.input-area {
  padding: 20px 32px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 12px;
  background: #ffffff;
  position: relative;
  align-items: flex-end;  /* 添加此行，使按钮与输入框底部对齐 */
}

textarea {
  flex-grow: 1;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  resize: none;
  font-size: 15px;
  line-height: 1.5;
  transition: all 0.3s ease;
  font-family: inherit;
  background: #f8fafc;
  min-height: 50px;    /* 设置最小高度 */
  max-height: 60px;   /* 设置最大高度 */
  overflow-y: auto;    /* 超出时显示滚动条 */
}

button {
  padding: 12px 24px;
  height: 50px;        /* 固定按钮高度 */
  min-width: 100px;    /* 调整最小宽度 */
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;      /* 防止按钮被压缩 */
}

button:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

button:disabled {
  background: #e2e8f0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

.messages::-webkit-scrollbar {
  width: 10px;
}

.messages::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 5px;
}

.messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
  border: 2px solid #f1f5f9;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}
</style>